<template>
  <div class="cockpit-box">
    <div class="cockpit-bg"></div>
    <nav-bar title="领导驾驶舱" theme="white" :leftArrow="false" :fixed="false" message></nav-bar>
    <div class="cockpit-home-top">
      <van-swipe :loop="false" :width="150" :show-indicators="false" :stop-propagation="false">
        <van-swipe-item @click="$router.push('/cockpit/urban')">
          <img src="@/assets/images/cockpit/home/homepage_city.png" />
          <p class="cockpit-img-title" style="left: 21%">城市运行监测</p>
        </van-swipe-item>
        <van-swipe-item @touchstart="clickStart" @touchend="clickEnd" @touchmove="onTouchMove">
          <img src="@/assets/images/cockpit/home/homepage_thing.png" />
          <p class="cockpit-img-title">事件概况总览</p>
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/images/cockpit/home/homepage_achievements.png" />
          <p class="cockpit-img-title">绩效考核问效</p>
        </van-swipe-item>
        <transition name="bounce">
          <van-swipe-item @click="$router.push('/cockpit/supervise')">
            <img src="@/assets/images/cockpit/home/homepage_leader.png" />
            <p class="cockpit-img-title">领导指挥督办</p>
          </van-swipe-item>
        </transition>
        <van-swipe-item @click="$router.push('/cockpit/analyse')">
          <img src="@/assets/images/cockpit/home/homepage_dang.png" />
          <p class="cockpit-img-title">辖区党建分析</p>
        </van-swipe-item>
      </van-swipe>
      <div class="cockpit-home-top-grid cockpit-home-tab" @click="$router.push('/cockpit/gridMember')">
        <div class="cockpit-home-top-grid-left">
          <img src="@/assets/images/cockpit/home/homepage-iconarea-gridmember.png" />
          <span>在线人员</span>
        </div>
        <div class="cockpit-home-top-grid-right">
          <span>{{ gredNmu }}</span>
          <span>/{{ gredTotal }}</span>
        </div>
      </div>
      <div class="cockpit-home-top-grid">
        <div class="cockpit-home-top-grid-left">
          <img src="@/assets/images/cockpit/home/homepage-iconarea-Videoequipment.png" />
          <span>在线设备</span>
        </div>
        <div class="cockpit-home-top-grid-right">
          <span>{{ deviceOnlineNmu }}</span>
          <span>/{{ deviceOnlineTotal }}</span>
        </div>
      </div>
    </div>
    <div class="cockpit-home-bottom">
      <h1>事件类型统计</h1>
      <annular :handlingData="eventTotal" :pietype="pieeventtype" v-if="tottalStaus" class="total-chart"></annular>
      <gb-card shadow class="home-event-container">
        <van-row>
          <van-col span="8" align="center" v-for="(item, key) in gridEvent" :key="key">
            <div class="home-event-item">
              <div class="home-event-item__pos">
                <p class="total" :style="{ color: gridEventExtra[key].color }">{{ item.count }}</p>
                <p class="total-text">{{ item.name }}</p>
              </div>
            </div>
          </van-col>
        </van-row>
      </gb-card>
      <div class="cockpit-home-echart-box">
        <div class="cockpit-home-echart-box-left">
          <div class="cockpit-home-overtime">
            <Sciecle :overtime="overtimedata"></Sciecle>
            <p>超时事件</p>
          </div>
          <div class="cockpit-home-secondary-disposal">
            <Semicircle
              :dbcs="abnormalData.supervisedCount"
              v-if="dubanStatus"
              :color="'#E25656'"
              :bgColor="'rgba(226, 86, 86, 0.3)'"
              style="padding-top: 25px"
            ></Semicircle>
            <div>
              <p>督办超时</p>
              <p>{{ abnormalData.supervisedCount }}</p>
            </div>
          </div>
        </div>
        <div class="cockpit-home-echart-box-right">
          <div class="cockpit-home-overtime">
            <Semicircle
              :dbcs="abnormalData.secondDesposedCount"
              :color="'#3B99DA'"
              :bgColor="'rgba(59, 153, 218, 0.34)'"
              v-if="dubanStatus"
              style="padding-top: 13px"
            ></Semicircle>
            <div>
              <p>二次处置</p>
              <p>{{ abnormalData.secondDesposedCount }}</p>
            </div>
          </div>
          <div class="cockpit-home-secondary-disposal">
            <Delayapplication :delaydata="abnormalData.delayedCount" v-if="dubanStatus"></Delayapplication>
            <p>延时申请</p>
          </div>
        </div>
      </div>
      <div style="padding: 10px"></div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { Semicircle, Annular, Sciecle, Delayapplication } from '@/components/Chart'
import Cockpit from '@/api/cockpit'
export default {
  name: 'cockpit-home',
  components: {
    Semicircle,
    Annular,
    Sciecle,
    Delayapplication
  },
  data() {
    return {
      gridEventExtra: [
        {
          color: '#E28556'
        },
        {
          color: '#E2AB56'
        },
        {
          color: '#3CBDD0'
        }
      ],
      gridEvent: [],
      gredNmu: '',
      deviceOnlineNmu: '',
      gredTotal: '',
      deviceOnlineTotal: '',
      eventTotal: '', // 事件总数
      abnomalType: '2',
      erciType: '1',
      abnormalData: {},
      pieeventtype: '1',
      overtimedata: 0,
      dubanStatus: false,
      tottalStaus: false,
      howLong: 0,
      clickFlag: true
    }
  },
  computed: {
    ...mapState({
      user: state => state.userInfo
    })
  },
  created() {
    this.onlineDate()
    this.eventType()
    this.abnormal()
  },
  methods: {
    onlineDate() {
      Cockpit.Online.count({ regionCode: this.user.regionCode }).then(res => {
        this.gredNmu = res.data.data.gridOnline
        this.deviceOnlineNmu = res.data.data.deviceOnline
        this.gredTotal = res.data.data.gridCount
        this.deviceOnlineTotal = res.data.data.deviceCount
      })
    },
    eventType() {
      this.gridEvent = []
      Cockpit.Online.getEventType({ regionCode: this.user.regionCode }).then(res => {
        this.eventTotal = res.data.data.solveRate
        this.tottalStaus = true
        this.gridEvent.push(
          {
            count: res.data.data.todayReportCount,
            name: '日上报总数'
          },
          {
            count: res.data.data.todayToDisposeCount,
            name: '今日待办数'
          },
          {
            count: res.data.data.todayDisposedCount,
            name: '日处置总数'
          }
        )
      })
    },
    // 异常处置
    abnormal() {
      Cockpit.Online.abnormal({ regionCode: this.user.regionCode }).then(res => {
        this.abnormalData = res.data.data
        this.overtimedata = this.abnormalData.overTimeCount
        this.dubanStatus = true
      })
    },
    // 点击跳转事件
    clickStart: function () {
      this.clickFlag = false
      this.howLong = new Date().getTime()
    },
    onTouchMove(e) {
      this.clickFlag = true
      // 为了兼容安卓部分情况而加的判断，如果不需要可忽略，若需要，注释上面一行代码，打开下面三行代码
      // this.clickIndex = this.clickIndex + 1;
      // if (this.clickIndex > 2) {
      //   this.clickFlag = true;
      // }
    },
    clickEnd: function () {
      if (this.clickFlag) {
        // console.log('滑动');
      } else {
        // 点击
        localStorage.removeItem('activeIdx')
        this.$router.push('/cockpit/event-overview')
      }
      /*  var duration = new Date().getTime() - this.howLong
        console.log(duration)
        if (duration < 100) {
          this.$router.push('/event/overview')
        } */
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/assets/style/cockpit/home.less';
</style>
